<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
            var slider_images_url = [
                {volist name='pics' id='vo'}
                '{$vo.url}',
                {/volist}
            ];
            var e_desc = '{$title}';
		</script>
<style type="text/css">
    
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
}
#container> div,#container> img
{
    position: absolute;
}
#shang
{
    left: 0px;
    -webkit-animation: shangmove 10s linear infinite alternate;
}
#xian
{
    -webkit-animation: xianmove 4s linear infinite alternate;
}
#wenzi
{
    left: 154px;
    top: 719px;
    -webkit-animation: wenzimove 4s linear infinite;
}
#xindiv
{
    width: 500px;
    left: 0px;
    top: 0px;
    height: 500px;

}
#xindiv > img
{
    position: absolute;
}
.sanjiaoup
{
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 60px solid rgba(160,199,238,1);
    opacity: 0;
    /*display: none;*/
    /*border-bottom: 60px solid rgba(160,199,0,0.5);*/
    /*background-color: #fff;*/
}
.sanjiaodown
{
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    /*border-bottom: 60px solid rgba(160,199,238,0.5);*/
    border-top: 60px solid rgba(160,199,238,1);
    opacity: 0;
    /*display: none;*/
    /*background-color: #fff;*/
}
#sanjiao1
{
    left: 79px;
    top: 291px;
}
#sanjiao2
{
    left: 167px;
    top: 291px;
}
#sanjiao3
{
    left: 250px;
    top: 291px; 
}
#sanjiao4
{
    left: 332px;
    top: 291px;  
}
#sanjiao5
{
    left: 123px;
    top: 353px;
}
#sanjiao6
{
    left: 209px;
    top: 353px;
}
#sanjiao7
{
    left: 291px;
    top: 353px;  
}
#sanjiao8
{
    left: 82px;
    top: 412px;
}
#sanjiao9
{
    left: 165px;
    top: 412px; 
}
#sanjiao10
{
    left: 249px;
    top: 412px;
}
#sanjiao11
{
    left: 330px;
    top: 412px; 
}
#sanjiao12
{
    left: 124px;
    top: 472px;
}
#sanjiao13
{
    left: 207px;
    top: 472px;
}
#sanjiao14
{
    left: 289px;
    top: 472px;
}
#sanjiao15
{
    left: 123px;
    top: 293px;
}
#sanjiao16
{
    left: 209px;
    top: 291px;
}
#sanjiao17
{
    left: 291px;
    top: 290px;
}
#sanjiao18
{
    left: 80px;
    top: 353px;
}
#sanjiao19
{
    left: 166px;
    top: 353px;
}
#sanjiao20
{
    left: 250px;
    top: 353px;
}
#sanjiao21
{
    left: 334px;
    top: 353px;
}
#sanjiao22
{
    left: 124px;
    top: 411px;
}
#sanjiao23
{
    left: 207px;
    top: 412px;
}
#sanjiao24
{
    left: 290px;
    top: 410px;

}
#sanjiao25
{
    left: 81px;
    top: 473px;
}
#sanjiao26
{
    left: 166px;
    top: 472px;
}
#sanjiao27
{
    left: 248px;
    top: 471px;
}
#sanjiao28
{
   left: 330px;
    top: 471px; 
}
#div1,#div2,#div1_view,#div2_view,#div3,#div3_view
{
    border: 5px solid #fff;
    box-shadow: 7px 14px 20px #666;
    position: absolute;
    opacity: 0;
}

</style>
<style type="text/css">
@-webkit-keyframes shangmove
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(-80px,0px);}
}
@-webkit-keyframes xianmove
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(-80px,0px);}
}
@-webkit-keyframes wenzimove
{
    0%   {opacity: 1;-webkit-transform: scale(1,1);}
    35%  {opacity: 0.5;-webkit-transform: scale(1,1);}
    70%  {opacity: 1;-webkit-transform: scale(1,1);}
    85%  {opacity: 1;-webkit-transform: scale(1,0);}
    100% {opacity: 1;-webkit-transform: scale(1,1);}
}
@-webkit-keyframes titlein
{
    from  {opacity: 0;-webkit-transform: translate(0px,-20px);}
    to    {opacity: 1;-webkit-transform: translate(0px,0px);}
}

@-webkit-keyframes titleout
{
    from  {opacity: 1;-webkit-transform: translate(0px,00px);}
    to    {opacity: 0;-webkit-transform: translate(0px,20px);}
}

@-webkit-keyframes div1_in
{
    from  {opacity: 0;-webkit-transform: scale(1.2);}
    to    {opacity: 1;-webkit-transform: scale(1);}
}
@-webkit-keyframes div1_out
{
    from  {opacity: 1;-webkit-transform: scale(1);}
    to    {opacity: 0;-webkit-transform: scale(1);}
}
@-webkit-keyframes div1_view_in
{
    from  {opacity: 0;-webkit-transform: scale(1.2);}
    to    {opacity: 0.3;-webkit-transform: scale(1.8);}
}
@-webkit-keyframes div1_view_out
{
    from  {opacity: 0.3;-webkit-transform: scale(1.8);}
    to    {opacity: 0;-webkit-transform: scale(1.8);}
}
@-webkit-keyframes div2_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,0px) scale(1.2);}
    to    {opacity: 1;-webkit-transform: translate(0px,30px) scale(1);}
}
@-webkit-keyframes div2_out 
{
    from  {opacity: 1;-webkit-transform: translate(0px,30px) scale(1);}
    to    {opacity: 0;-webkit-transform: translate(0px,60px) scale(1);}
}
@-webkit-keyframes div2_view_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,0px) scale(1.8);}
    to    {opacity: 0.3;-webkit-transform: translate(-50px,0px) scale(1.8);}
}
@-webkit-keyframes div2_view_out
{
    from  {opacity: 0.3;-webkit-transform: translate(-50px,0px) scale(1.8);}
    to    {opacity: 0;-webkit-transform: translate(-80px,0px) scale(1.8);}
}
@-webkit-keyframes div3_in 
{
    from  {opacity: 0;-webkit-transform: translate(30px,0px) scale(1.2);}
    to    {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
}
@-webkit-keyframes div3_view_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,0px) scale(1.8);}
    to    {opacity: 0.3;-webkit-transform: translate(50px,0px) scale(1.8);}
}
@-webkit-keyframes div3_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
    to    {opacity: 0;-webkit-transform: translate(0px,20px) scale(1);}
}
@-webkit-keyframes div3_view_out
{
    from  {opacity: 0.3;-webkit-transform: translate(50px,0px) scale(1.8);}
    to    {opacity: 0;-webkit-transform: translate(100px,0px) scale(1.8);}
}
@-webkit-keyframes moving_down
{
    from  {-webkit-transform: translate(0px,-25px);}
    to    {-webkit-transform: translate(0px,25px);}
}
@-webkit-keyframes moving_up
{
    from  {-webkit-transform: translate(0px,25px);}
    to    {-webkit-transform: translate(0px,-25px);}
}
@-webkit-keyframes moving_left
{
    from  {-webkit-transform: translate(25px,0px);}
    to    {-webkit-transform: translate(-25px,0px);}
}
@-webkit-keyframes moving_right
{
    from  {-webkit-transform: translate(-25px,0px);}
    to    {-webkit-transform: translate(25px,0px);}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1;}
}
</style>

<div id='container'>
    <img src='__DIR__{$dir}/img/bg.jpg'>
    <!-- <img src='__DIR__{$dir}/img/demo.jpg' width='500'> -->

    <!-- <img id='xian' src='__DIR__{$dir}/img/xian.png'> -->
    <div id='xindiv'>
        <!-- <img src='__DIR__{$dir}/img/xin.png'> -->
    </div>

    <div id='view_box'>
        <div id='div1_view'></div>
<!--         <div id='div2_view'></div>
        <div id='div3_view'></div> -->
    </div>

    <div id='div_box'>
        <div id='div1'></div>
<!--         <div id='div2'></div>
        <div id='div3'></div> -->
    </div>

    <div id='sanjiao1' class='sanjiaoup'></div>
    <div id='sanjiao2' class='sanjiaoup'></div>
    <div id='sanjiao3' class='sanjiaoup'></div>
    <div id='sanjiao4' class='sanjiaoup'></div>
    <div id='sanjiao5' class='sanjiaoup'></div>
    <div id='sanjiao6' class='sanjiaoup'></div>
    <div id='sanjiao7' class='sanjiaoup'></div>
    <div id='sanjiao8' class='sanjiaoup'></div>
    <div id='sanjiao9' class='sanjiaoup'></div>
    <div id='sanjiao10' class='sanjiaoup'></div>
    <div id='sanjiao11' class='sanjiaoup'></div>
    <div id='sanjiao12' class='sanjiaoup'></div>
    <div id='sanjiao13' class='sanjiaoup'></div>
    <div id='sanjiao14' class='sanjiaoup'></div>

    <div id='sanjiao15' class='sanjiaodown'></div>
    <div id='sanjiao16' class='sanjiaodown'></div>
    <div id='sanjiao17' class='sanjiaodown'></div>
    <div id='sanjiao18' class='sanjiaodown'></div>
    <div id='sanjiao19' class='sanjiaodown'></div>
    <div id='sanjiao20' class='sanjiaodown'></div>
    <div id='sanjiao21' class='sanjiaodown'></div>
    <div id='sanjiao22' class='sanjiaodown'></div>
    <div id='sanjiao23' class='sanjiaodown'></div>
    <div id='sanjiao24' class='sanjiaodown'></div>
    <div id='sanjiao25' class='sanjiaodown'></div>
    <div id='sanjiao26' class='sanjiaodown'></div>
    <div id='sanjiao27' class='sanjiaodown'></div>
    <div id='sanjiao28' class='sanjiaodown'></div>

    <img id='shang' src='__DIR__{$dir}/img/shang.png'>
    <!-- <img id='wenzi' src='__DIR__{$dir}/img/wenzi.png'> -->

    <div id='pagetitle' style='position:absolute;width:248px;height:200px;top:314px;left:124px;overflow:hidden;'>
        <div style='width:248px;height:200px;top:0px;left:0px;overflow:hidden;'>
            <div style='width:248px;height:200px;display:table;overflow:hidden;'>
                <div id='titlecontent' style='width:248px;height:200px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;color:#515151;line-height:150%;'>{$title}</div>
            </div>
        </div>
    </div>

</div>


<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=5000;
var timeout0;
var timeout1;
var timeout2;
var timeout3;
var timeout4;
var timeout5;
var timeout6;
var timeout7;
var timeout8;
var timeout9;
var sanjiaolist = ['sanjiao1','sanjiao18','sanjiao15','sanjiao5','sanjiao19','sanjiao2','sanjiao6','sanjiao16','sanjiao20','sanjiao3','sanjiao17','sanjiao7','sanjiao21','sanjiao4','sanjiao8','sanjiao25','sanjiao22','sanjiao12','sanjiao26','sanjiao9','sanjiao13','sanjiao23','sanjiao27','sanjiao10','sanjiao24','sanjiao14','sanjiao28','sanjiao11'];
function id(name)
{
    return document.getElementById(name);
}
function loading()
{
    // e_musics(2);
    checkbtn();
    div1 = id('div1');
    // div2 = id('div2');
    // div3 = id('div3');

    div1_view = id('div1_view');
    // div2_view = id('div2_view');
    // div3_view = id('div3_view');

    view_box = id('view_box');
    div_box = id('div_box');

    for(var i=0;i<28;i++)
    {
        sanjiaolist[i] = id(sanjiaolist[i])
    }

    createheart();
    load_images();

}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    
    bl_keepload = 'first';
    step_load();   
}
//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }

    }
}
// function loading_first () 
// {   
//     if(slider_images_url.length > 10)
//     {
//         var load_num = 10;
//     }
//     else
//     {
//         var load_num = slider_images_url.length;
//     }

//     for(var i=0;i<load_num;i++)
//     {
//         var img=new Image();
//         img.index=i;
//         img.src=slider_images_url[i];
//         img.onload=image_onload;
//         img.onerror= image_onerror;
//         Onload_imgs_url[i] = 'loading';
//     } 
// }

// function  loading_others () 
// {
//     if(slider_images_url.length > 10)
//     {     
//         for(var i=10;i<slider_images_url.length;i++)
//         {
//             var img=new Image();
//             img.index=i;
//             img.src=slider_images_url[i];
//             img.onload=image_onload;
//             img.onerror= image_onerror;
//             Onload_imgs_url[i] = 'loading';
//         } 
//     }
// }
function id(name)
{
    return document.getElementById(name);
}

function rand(min,max)
{
    return min+Math.floor(Math.random()*(max-min+1));
}

function showtitle()
{
    id('titlecontent').innerHTML = e_desc;
    id('pagetitle').style.webkitAnimation = 'titlein 1s 1.5s linear both';

    showsanjiao();
}

function createheart()
{
    // var con_div = id('xindiv');

    // for(var i = 0;i < 3; i++)
    // {
    //     var img = document.createElement('img');
    //     img.style.width = '39px';
    //     img.style.left = rand(0,460) + 'px';
    //     img.style.top = rand(-20,10) + 'px';
    //     // img.style.webkitAnimation = 'xinmove 5s '+0.25*i+'s linear infinite';
    //     img.src='__DIR__{$dir}/img/xin.png';

    //     var csstext='@-webkit-keyframes heart'+i+' {from{-webkit-transform: translate(0px,0px) rotate(0deg);opacity:1} to{-webkit-transform: translate(0px,500px) rotate('+rand(-360,360)+'deg);opacity:0}}';
    //     // console.log(csstext);
    //     var style=document.createElement('style');
    //     document.head.appendChild(style);
    //     var sheet=style.sheet;
    //     sheet.insertRule(csstext,0);

    //     img.style.webkitAnimation = 'heart'+i+' 5s '+0.5*i+'s linear infinite';

    //     con_div.appendChild(img);
    // } 
}


var sanjiaotype = true;
function showsanjiao()
{
    sanjiaoindex = 0;

    inter = setInterval(function()
    {
        var img = sanjiaolist[sanjiaoindex];
        img.style.opacity = 0.3;

        sanjiaoindex ++ ;

        if(sanjiaoindex >14)
        {
            var img = sanjiaolist[sanjiaoindex-14];
            img.style.opacity = 1;

            if(sanjiaoindex == 28)
            {
                clearInterval(inter); 
                return;
            }
                    
        }

    },100)
}

function distitle()
{
    var rand_x = [];
    var rand_y = [];


    // id('xindiv').style.display = 'none';

    for(var i =0;i<28;i++)
    {
        

        if(i>24 || i<19)
        {
            sanjiaolist[i].style.display = 'none';
        }

        else
        {

            if(i%2 == 0)
            {
                rand_x[i] = -rand(400,500);
                rand_y[i] = rand(-600,600);
                var csstext='@-webkit-keyframes heartmove'+i+' {from{-webkit-transform: translate(0px,0px)} to{-webkit-transform: translate('+rand_x[i]+'px,'+rand_y[i]+'px)}}';
            }
            else{
                rand_x[i] = rand(400,500);
                rand_y[i] = rand(-600,600);
                var csstext='@-webkit-keyframes heartmove'+i+' {from{-webkit-transform: translate(0px,0px)} to{-webkit-transform: translate('+rand_x[i]+'px,'+rand_y[i]+'px)}}';
            }
            
            var style=document.createElement('style');
            document.head.appendChild(style);
            var sheet=style.sheet;
            sheet.insertRule(csstext,0);

            

            sanjiaolist[i].style.webkitAnimation = 'heartmove'+i+' '+rand(15,25)/10+'s linear both';


        }
        // console.log(img.style.webkitAnimtion);
    }

    for(var i=0;i<28;i++)
    {
        var csstext = '@-webkit-keyframes moveto' + i + ' {from{-webkit-transform: translate('+rand_x[i]+'px,'+rand_y[i]+'px)} to{-webkit-transform: translate('+(-rand_x[i])+'px,'+(-rand_y[i])+'px)}}';
        var style = document.createElement('style');
        // console.log(csstext)
        document.head.appendChild(style);
        var sheet = style.sheet;
        sheet.insertRule(csstext,0);

        var csstext1 = '@-webkit-keyframes moveback' + i + ' {from{-webkit-transform: translate('+(-rand_x[i])+'px,'+(-rand_y[i])+'px)} to{-webkit-transform: translate('+rand_x[i]+'px,'+rand_y[i]+'px)}}';
        var style1 = document.createElement('style');
        // console.log(csstext1);
        document.head.appendChild(style1);
        var sheet1 = style1.sheet;
        sheet1.insertRule(csstext1,0);
    }

    id('pagetitle').style.webkitAnimation = 'titleout 0.7s linear both';

    timeout1 = setTimeout(show1,300);
}


function show1()
{
    
    view_box.style.webkitAnimation = 'moving_down 5s linear both';
    div_box.style.webkitAnimation = 'moving_up 5s linear both';

    div1.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    div1_view.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';

    img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    if(img_bili>1)
    {
        var img_width = 440;
    }
    else
    {
        if(img_bili < (500/800))
            var img_width = 400;
        else
            var img_width = 420;
    }

    var img_height = img_width/img_bili;
    div1.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1_view.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1.style.width = img_width+'px';
    div1_view.style.width = img_width+'px';
    div1.style.left = (500-img_width)/2+'px';
    div1_view.style.left = (500-img_width)/2+'px';

    if(img_bili < (500/800))//图片过长
    {

        div1.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1_view.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1.style.height = '600px';
        div1_view.style.height = '600px';
        div1.style.top = '90px';
        div1_view.style.top = '90px';
    }
    else
    {
        div1.style.backgroundPosition = '0px 0px';
        div1_view.style.backgroundPosition = '0px 0px';
        div1.style.height = img_height + 'px';
        div1_view.style.height = img_height + 'px';
        div1.style.top = (780-img_height)/2+'px';
        div1_view.style.top = (780-img_height)/2+'px';
    }
    
    div1.style.webkitAnimation = 'div1_in 1.5s ease-in-out both';
    div1_view.style.webkitAnimation = 'div1_view_in 1.5s ease-in-out both';

    
    timeout9 = setTimeout(function()
    {
        div1.style.webkitAnimation = 'div1_out 1s linear both';
        div1_view.style.webkitAnimation = 'div1_view_out 1s linear both';
    },5000)


    timeout2 = setTimeout(show2,6000)

    setImageindex();
}

function show2()
{
    if(image_url_index == Onload_imgs_url.length)
    {
        setImageindex();
        return;
    }
    sanjiaoani();
    div1.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    div1_view.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';

    img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    if(img_bili>1)
    {
        var img_width = 440;
    }
    else
    {
        if(img_bili < (500/800))
            var img_width = 400;
        else
            var img_width = 420;
    }

    var img_height = img_width/img_bili;
    div1.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1_view.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1.style.width = img_width+'px';
    div1_view.style.width = img_width+'px';
    div1.style.left = (500-img_width)/2+'px';
    div1_view.style.left = (500-img_width)/2+'px';

    if(img_bili < (500/800))//图片过长
    {

        div1.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1_view.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1.style.height = '600px';
        div1_view.style.height = '600px';
        div1.style.top = '90px';
        div1_view.style.top = '90px';
    }
    else
    {
        div1.style.backgroundPosition = '0px 0px';
        div1_view.style.backgroundPosition = '0px 0px';
        div1.style.height = img_height + 'px';
        div1_view.style.height = img_height + 'px';
        div1.style.top = (780-img_height)/2+'px';
        div1_view.style.top = (780-img_height)/2+'px';
    }
    
    div1.style.webkitAnimation = 'div2_in 1.5s 1s ease-in-out both';
    div1_view.style.webkitAnimation = 'div2_view_in 1.5s 1s ease-in-out both';

    view_box.style.webkitAnimation = 'moving_right 5s linear both';
    div_box.style.webkitAnimation = 'moving_down 5s linear both';

    timeout3 = setTimeout(function()
    {
        div1.style.webkitAnimation = 'div2_out 1s linear both';
        div1_view.style.webkitAnimation = 'div2_view_out 1s linear both';
    },5000)

    timeout4 = setTimeout(show3,6000)

    setImageindex();
}

function show3()
{
    if(image_url_index == Onload_imgs_url.length)
    {
        setImageindex();
        return;
    }
    sanjiaoani();

    div1.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    div1_view.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';

    img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    if(img_bili>1)
    {
        var img_width = 440;
    }
    else
    {
        if(img_bili < (500/800))
            var img_width = 400;
        else
            var img_width = 420;
    }

    var img_height = img_width/img_bili;
    div1.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1_view.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1.style.width = img_width+'px';
    div1_view.style.width = img_width+'px';
    div1.style.left = (500-img_width)/2+'px';
    div1_view.style.left = (500-img_width)/2+'px';

    if(img_bili < (500/800))//图片过长
    {

        div1.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1_view.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1.style.height = '600px';
        div1_view.style.height = '600px';
        div1.style.top = '90px';
        div1_view.style.top = '90px';
    }
    else
    {
        div1.style.backgroundPosition = '0px 0px';
        div1_view.style.backgroundPosition = '0px 0px';
        div1.style.height = img_height + 'px';
        div1_view.style.height = img_height + 'px';
        div1.style.top = (760-img_height)/2+'px';
        div1_view.style.top = (760-img_height)/2+'px';
    }
    
    div1.style.webkitAnimation = 'div3_in 1.5s 1s ease-in-out both';
    div1_view.style.webkitAnimation = 'div3_view_in 1.5s 1s ease-in-out both';


    view_box.style.webkitAnimation = 'moving_left 5s linear both';
    div_box.style.webkitAnimation = 'moving_up 5s linear both';

    timeout5 = setTimeout(function()
    {
        div1.style.webkitAnimation = 'div3_out 1s linear both';
        div1_view.style.webkitAnimation = 'div3_view_out 1s linear both';
    },4000)

    timeout6 = setTimeout(show4,5000);

    setImageindex();
}

function show4()
{
    if(image_url_index == Onload_imgs_url.length)
    {
        setImageindex();
        return;
    }
    sanjiaoani();

    div1.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    div1_view.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';

    img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    if(img_bili>1)
    {
        var img_width = 440;
    }
    else
    {
        if(img_bili < (500/800))
            var img_width = 400;
        else
            var img_width = 420;
    }

    var img_height = img_width/img_bili;
    div1.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1_view.style.backgroundSize = img_width+'px '+img_height + 'px';
    div1.style.width = img_width+'px';
    div1_view.style.width = img_width+'px';
    div1.style.left = (500-img_width)/2+'px';
    div1_view.style.left = (500-img_width)/2+'px';

    if(img_bili < (500/800))//图片过长
    {

        div1.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1_view.style.backgroundPosition = '0px -'+(img_height-780)/2+'px';
        div1.style.height = '600px';
        div1_view.style.height = '600px';
        div1.style.top = '90px';
        div1_view.style.top = '90px';
    }
    else
    {
        div1.style.backgroundPosition = '0px 0px';
        div1_view.style.backgroundPosition = '0px 0px';
        div1.style.height = img_height + 'px';
        div1_view.style.height = img_height + 'px';
        div1.style.top = (780-img_height)/2+'px';
        div1_view.style.top = (780-img_height)/2+'px';
    }
    
    div1.style.webkitAnimation = 'div1_in 1.5s 1s ease-in-out both';
    div1_view.style.webkitAnimation = 'div1_view_in 1.5s 1s ease-in-out both';


    view_box.style.webkitAnimation = 'moving_up 5s linear both';
    div_box.style.webkitAnimation = 'moving_down 5s linear both';

    timeout7 = setTimeout(function()
    {
        div1.style.webkitAnimation = 'div1_out 1s linear both';
        div1_view.style.webkitAnimation = 'div1_view_out 1s linear both';
    },5000)

    timeout8 = setTimeout(show2,6000);

    setImageindex();
}


function setImageindex()
{
    if(image_url_index == Onload_imgs_url.length)
    {
        clearTimeout(timeout0);
        clearTimeout(timeout1);
        clearTimeout(timeout2);
        clearTimeout(timeout3);
        clearTimeout(timeout4);
        clearTimeout(timeout5);
        clearTimeout(timeout6);
        clearTimeout(timeout7);
        clearTimeout(timeout8);
        clearTimeout(timeout9);
        id('enddiv').style.display = 'block';
        id('enddiv').style.webkitAnimation = 'fadein 1s linear both';
        id('title_text').innerHTML = e_desc;
    }

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;

    }
    if(image_url_index % step_loadnum == 0)
    {
        // alert()
        step_load();
    }
    console.log('setimg:' + Onload_imgs_url[image_url_index]);
    image_url_index ++ ;
}

function sanjiaoani()
{
    for(var i =0;i<28;i++)
    {
        if(sanjiaotype)
            sanjiaolist[i].style.webkitAnimation = 'moveto'+i+' '+rand(20,30)/10+'s ease-out both';
        else
            sanjiaolist[i].style.webkitAnimation = 'moveback'+i+' '+rand(20,30)/10+'s ease-out both';

    }
    sanjiaotype = !sanjiaotype;
    // console.log(sanjiaotype);
    // console.log(sanjiaolist[0].style.webkitAnimation)
}
call_me(loading);

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    for(var i=0;i<28;i++)
    {
        sanjiaolist[i].style.webkitAnimation = '';
        sanjiaolist[i].style.opacity = 0;
    }

    div1.style.webkitAnimation = '';
    div1_view.style.webkitAnimation = '';

    view_box.style.webkitAnimation = '';
    div_box.style.webkitAnimation = '';

    clearInterval(inter);

    clearTimeout(timeout0);
    clearTimeout(timeout1);
    clearTimeout(timeout2);
    clearTimeout(timeout3);
    clearTimeout(timeout4);
    clearTimeout(timeout5);
    clearTimeout(timeout6);
    clearTimeout(timeout7);
    clearTimeout(timeout8);
    clearTimeout(timeout9);

    id('enddiv').style.display = 'none';
    id('enddiv').style.webkitAnimation = '';
}

function checkbtn ()
{
 //   if(editmode)
  //  {
  //      id('reshowbtn').style.left = '165px';
   //     id('guanzhubtn').style.display = 'none';
   // }
}
</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css?ver=3" />
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css" />

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>
